<template>
  <div>
    <h1>商品列表</h1>
    <table v-if="products.length > 0">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>上架时间</th>
          <th>商品价格</th>
          <th>商品折扣</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.name">
          <td>{{ product.name }}</td>
          <td>{{ product.date }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.discount * 100 }}%</td>
          <td>
            <button @click="editProduct(product)">编辑</button>
            <button @click="deleteProduct(product)">删除</button>
            <button @click = "detailProduct(product)">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p v-else>加载商品数据...</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: [],  // 用来存储商品数据
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    // 获取商品数据
    fetchProducts() {
      const userInfo = localStorage.getItem("userInfo");
      console.log(userInfo);
      console.log(JSON.parse(userInfo))
      const user = JSON.parse(userInfo);
      axios
        .get('http://localhost:8080/products',{
          params: {
            token: user.token,
            name: user.username
          },
        })  // 后端接口 URL
        .then((response) => {
          this.products = response.data;  // 将返回的数据保存到 products
        })
        .catch((error) => {
          console.error('获取商品数据失败:', error);
        });
    },
    // 编辑商品（示例）
    editProduct(product) {
      axios.post("http://localhost:8080/updateProducts",product)
      .then((response)=>{
        console.log(response.data);
      }).catch((error)=>{
        console.log("更新异常");
      });
      console.log('编辑商品:', product);
      // 跳转到编辑页面等操作
    },
    // 删除商品（示例）
    deleteProduct(product) {
      console.log('删除商品:', product);
      // 调用删除接口等操作
    },
    detailProduct(product){
      this.$router.push({
        name: "Product",
        params: {id: 1234},
      });
    },
  },
};
</script>

<style scoped>
/* 这里可以添加自定义样式 */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}
button {
  margin-right: 10px;
}
</style>
